<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="1" cellspacing="0">
    <caption>员工列表</caption>
    <tr>
        <th>id</th><th>名字</th><th>工作</th><th>工资</th><th>操作</th>
    </tr>
      <tr v-for="emp in arr">
          <td>{{emp.id}}</td>
          <td><a :href="'update.html?id='+emp.id">{{emp.name}}</a></td>
          <td>{{emp.job}}</td>
          <td>{{emp.sal}}</td>
          <!-- href="javascript:void(0)：取消超链接默认跳转效果-->
          <td><a href="javascript:void(0)" @click="deleteById(emp.id)">删除</a></td>
      </tr>
  </table>
    <!--引入axios和vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"table",
            data:{
                //[{"id":3,"name":"王五五","job":"设计师","sal":8000},
                // {"id":5,"name":"张三","job":"Java工程师","sal":15000}]
                arr:[{id:1,name:"太乙真人",job:"十二金仙",sal:3800},
                    {id:2,name:"申公豹",job:"敖斌师傅",sal:10000},
                    {id:3,name:"李靖",job:"陈唐关总兵",sal:15000},
                ]
            },  //created方法在页面加载完毕之后立刻发起请求
            created:function () {
                axios.get("/select").then(function (response){
                    //将后端返回的数据直接给员工数组
                    v.arr = response.data;
                })
            },
            methods:{
                deleteById:function(id){
                    if(confirm("您确认删除吗?")){
                        //发起异步请求
                        axios.get("/delete?id="+id).then(function () {
                            alert("删除成功");
                            location.reload();//刷新本页面
                        })
                    }
                }
            }

        })
    </script>
</body>
</html>